<template>
	<view class="container">
		<view class="wrap" v-for="i in 10" :key="i">
			<view class="title">
				西域水果官网旗舰店
			</view>
			<div class="content">
				
				<view class="checkbox-item">
					<checkbox-group class="block" @change="CheckboxChange">
						<checkbox class='round ' :class="checked ? 'checked':'' " :checked="checked" value="A"></checkbox>
					</checkbox-group>
				</view>
				
				<image src="../../static/logo.png" mode="scaleToFill" class="image"></image>
				<view class="goods-title">
					<text>海南西州哈密瓜天王为南华净重5-6斤当季新鲜蔬果一项批发</text>
					
					<view class="wrap-bottom">
						<text>￥99</text>
						<input-number></input-number>
					</view>
				</view>
			</div>
	
		</view>
		
		
	 
		<view class="buttom">
			<view class="select-all">
				<view class="checkbox-all">
					<checkbox-group class="block" @change="CheckboxChange">
						<checkbox class='round ' :class="checked ? 'checked':'' " :checked="checked" value="A"></checkbox>
					</checkbox-group>
				</view>
				<text>全选</text>
			</view>
			
			<view class="desc">
				<text>不含运费</text>
				<text>合计:</text>
				<text>￥39.9</text>
			</view>
			<view class="btn" @click="jiesuanBtn">
				结算(1)
			</view>
		</view>
		
		<view style="margin-top: 150rpx;">
			 
		</view>
	 
	</view>
</template>

<script>
 import inputNumber from '../../components/input-number/input-number.vue'
	export default {
		components:{inputNumber},
		data() {
			return {
				checked:false,
			}
		},
		methods: {
			CheckboxChange(){
				if(this.checked){
					this.checked = false
				}else{
					this.checked = true
				}
				
			},
			jiesuanBtn(){
				uni.navigateTo({
					url:'../goodsorders/goodsorders'
				})
			}
			
		},
		 
	}
</script>

<style>
	
	.container{
		
	}
	.wrap{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
	}
	.wrap .title{
		font-size: 30rpx;
		color: #4a4a4a;
		font-weight: 600;
	}
	.wrap .content{
		display: flex;
		margin: 20rpx 0;
	}
	.wrap .content .goods-title{
		font-size: 26rpx;
	}
	.content .checkbox-item{
		align-self: center;
	}
	.content .image{
		width: 200rpx;
		height: 150rpx;
		margin: 0 20rpx;
	}
	.wrap-bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		
	}
	.wrap-bottom text{
		font-weight: 700;
		font-size: 30rpx;
		color: #f0540e;
	}
	
	
/* 底部浮动 */
	
	.buttom{
		position: fixed;
		left: 0;
		bottom: 50px;
		width: 100%;
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 120rpx;
	}
	.buttom .select-all{
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.select-all text{
		margin-left: 20rpx;
	}
	.buttom .desc{
		margin-left: 100rpx;
		
	}
	.buttom .desc text:first-child{
		color: #CCCCCC;
		font-size: 12rpx;
	}
	.buttom .desc text:nth-child(2){
		font-weight: 500;
		font-size: 35rpx;
		padding: 0 10rpx;
	}
	.buttom .desc text:nth-child(3){
		color: #ff7a04;
		font-weight: 600;
	}
	.buttom .btn{
		height: 80rpx;
		background-color: #fe7903;
		width: 180rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 85rpx;
		font-size: 35rpx;
		color: #FFFFFF;
		font-weight: 500;
	}
	
 
	
	

</style>
